<template>
  <div class="container" :class="[{an:isAndroid,ios:isiOS}]">
    <video id="first-video"
           x5-video-player-type="h5"
           x5-video-player-fullscreen="true"
           x5-playsinline=""
           playsinline
           webkit-playsinline=""
           :src="url"
           autoplay
           :playOrPause="playOrPause"
           x-webkit-airplay="allow"
           @click="pauseVideo"
           @ended="onPlayerEnded($event)">
           <!--@loadeddata="loadedData($event)"-->
    </video>
    <img v-show="isVideoShow" class="play" @click="playvideo" v-if="isiOS" src="../../assets/VideoPlayIcon.png" />
    <img v-show="isShow" class="platStart" @click="androidPlay" v-if="isAndroid"  src="../../assets/VideoPlayIcon.png">
  </div>
</template>

<script>
    export default {
        name: "productVideo",
      props: {
        'url': String,
        'poster': String
      },
      data () {
        let u = navigator.userAgent
        return {
//	      poster: this.appConfig('app.img_url'),
//	      videoUrl: this.appConfig('app.video_url'),
          isVideoShow: true,
          isShow: true,
          playOrPause: true,
          video: null,
          isAndroid: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
          isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
          videoHeight:0,
          isPlay:true,
        }
      },
      methods: {
        loadedData(e) {
          /*let video = document.querySelector('video')
          video.play();
          setTimeout(function () {
            video.pause();
          },1000)*/
          let video=e.currentTarget;
          let scale = 1;
          let canvas = document.createElement("canvas");//canvas画布
          canvas.width = video.videoWidth * scale;
          canvas.height = video.videoHeight * scale;
          canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);//画图
          video.setAttribute("poster", canvas.toDataURL("image/png"));
        },
        getScreen: function () {
          this.videoHeight = document.body.clientWidth / 2;
        },
        playvideo(event) {
          if (this.isiOS) {
            let video = document.querySelector('video')
            this.isVideoShow = false
            video.play()
//          进入全屏
            window.onresize = function () {
              video.style.width = window.innerWidth + 'px'
              video.style.height = window.innerHeight + 'px'
            }
          }
        },
        pauseVideo () {  //暂停\播放
          let video = document.querySelector('video')
          if (this.playOrPause) {
            video.pause();
            this.isShow=true;
            this.isVideoShow=true;
          } else {
            video.play();
            this.isShow=false;
            this.isVideoShow=false;
          }
          this.playOrPause = !this.playOrPause
        },
        onPlayerEnded (player) { //视频结束
          this.isVideoShow = true
          this.isShow = true
        },
        pause(){
          let video = document.querySelector('video');
          video.pause();
        },
        androidPlay () {
          let video = document.querySelector('video')
          this.isShow = false;
          video.play()
        }
      },
      mounted(){
          this.getScreen();
          const _this=this;
          setTimeout(function () {
            _this.pause();
          },100)
      }
    }
</script>

<style scoped>
  #first-video{
    object-fit: fill;
    width:100%;
    height:100%
  }
  .container {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    width:100%;
    height:auto;
    display: block;
  }
  .container video{
    font-size: 0;
    display: block;
  }
  .play,.platStart{
    z-index: 999;
    width: 36px;
    height:36px;
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -18px;
    margin-top: -18px;
    object-fit: fill;
  }
</style>
